import React, { useState } from 'react'
import './First_screen.css'
// 引入对话框
import { Button, Modal } from 'antd';

const First_screen: React.FC = () => {

    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };


    // 新增提交处理函数
    const handleSubmit = () => {
        // 在这里可以添加你需要的提交逻辑，比如表单验证等
        console.log('表单已提交');
        setIsModalOpen(false); // 关闭Modal
    };

    return (
        <div >
            <div className="screen_left">
                <h1>视觉内容创新方案</h1>
                <h1>驱动企业营销增长</h1>
                <p>全链路数字化内容中台，助力企业营销降本增效，为数字化时代<br />
                    快速迭代的内容营销持续赋能</p>
                {/* Model对话框 */}
                <Button type="primary" onClick={showModal}>
                    立即咨询
                </Button>
                <Modal title="" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null} className='modal'>
                    <div className='blue'>
                        <h1>立即申请产品试用</h1>
                        <p>通过内容力赋能业务增长力</p>
                    </div>
                    <p style={{ textAlign: "center", marginBottom: "15px" }}>提交信息后，工作时间咨询顾问会在2小时内为您提供专属服务</p>
                    <p>*姓名</p>
                    <input type="text" placeholder='请输入您的姓名' />
                    <p>*手机号</p>
                    <div className='hao'>
                        <select name="">
                            <option value="+86">+86</option>
                        </select>
                        <input type="text" placeholder='请输入正确的手机号码' />
                    </div>

                    <p>*企业名称</p>
                    <input type="text" placeholder='请输入您所在的企业名称' />
                    <p>*需要使用产品的人数</p>
                    <div className='span'>
                        <span>单人使用</span>
                        <span>2-20人</span>
                        <span>20人以上</span>
                    </div>

                    <br />
                    <button onClick={handleSubmit}>提交</button>
                </Modal>



            </div>
            <div className="video">
                <video autoPlay muted loop src="https://cdn.dancf.com/fe-assets/20231204/ac0f2eb25a81c4ec41964ed319a08eb7.webm" ></video>
            </div>
        </div>
    )
}

export default First_screen
